<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒模型样式</title>
		<style type="text/css">
			/**
			 * box-shadow
			 * 盒模型阴影
			 * 语法：
			 * box-shadow: h-shadow v-shadow blur spread color inset;
			 * h-shadow 必需。水平阴影的位置。允许负值。 
			 * v-shadow 必需。垂直阴影的位置。允许负值。 
			 * blur 可选。模糊距离。 
			 * spread 可选。阴影的尺寸。 
			 * color 可选。阴影的颜色。请参阅 CSS 颜色值。 
			 * inset 可选。将外部阴影 (outset) 改为内部阴影。
			 *
			 * 多个阴影效果可叠加，用逗号隔开，依次向下叠加
			 */
			.box1{
				color: white;
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				margin: 10px;
				box-shadow: 10px 10px 10px #11719E,10px 10px 10px #00FFFF;
			}
			/* 
			 * 倒影
			 */
			.box2 img{
				/* 也是只有移动端可用,方向和大小位置不能变 */
				-webkit-box-reflect:right 10px;
			}
			/**
			 * resize
			 * 设置用户可以调整大小
			 * 必须结合overflow使用才有效
			 */
			.box3{
				width: 200px;
				height: 100px;
				background-color: #00FFFF;
				/* resize */
				resize: both;
				overflow: auto;
			}
			/**
			 * box-sizing
			 * 允许您以确切的方式定义适应某个区域的具体内容。
			 * 语法：
			 * box-sizing: content-box|border-box|inherit;
			 * content-box 默认值,这是由 CSS2.1 规定的宽度高度行为。
			 * 				宽度和高度分别应用到元素的内容框。
			 *				在宽度和高度之外绘制元素的内边距和边框。
			 * border-box 为元素设定的宽度和高度决定了元素的边框盒。
			 * 				就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
			 *				通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
			 */
			.box4{
				color: white;
				width: 100px;
				height: 100px;
				background-color: #0000FF;
				margin-top: 20px;
				/**
				 * 不加box-sizing，padding属性会使可见框变大
				 * width和height描述的是内容区的大小
				 * 整个box的大小为110*110
				 */
				padding: 10px;
				/**
				 * 加上box-sizing: border-box
				 * width和height描述的就是box的大小
				 * 内容区会被padding包裹，尺寸为90*90
				 */
				box-sizing: border-box;
			}
		</style>
	</head>
	<body>
		<div class="box1">盒模型阴影</div>
		<div class="box2">
			<img src="exercise/img/item/sub_img2.png">
		</div>
		<div class="box3"></div>
		<div class="box4">这是内容</div>
	</body>
</html>
